<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { useStorage } from "@vueuse/core";
import { computedRefreshable } from "@/framework/vue/composable/computed-refreshable.ts";
import _ from "lodash";
import { ulid } from "ulid";
import { copyText } from "@/util/clipboard.ts";

const amount = useStorage("ulid-generator-amount", 1);
const formats = [
  { label: "Raw", value: "raw" },
  { label: "JSON", value: "json" },
] as const;
const format = useStorage<(typeof formats)[number]["value"]>("ulid-generator-format", formats[0].value);

const [ulids, refreshUlids] = computedRefreshable(() => {
  const ids = _.times(amount.value, () => ulid());

  if (format.value === "json") {
    return JSON.stringify(ids, null, 2);
  }

  return ids.join("\n");
});
</script>

<template>
  <tool-view title="ULID生成器" description="生成随机的通用唯一词典可排序标识符（ULID）">
    <div class="pv-20 full-view flex-center">
      <a-form class="w-80p" :label-col="{ span: 5 }">
        <a-form-item label="数量">
          <a-input-number v-model:value="amount" :min="1" :max="100" class="w-full" />
        </a-form-item>
        <a-form-item label="输出格式">
          <a-radio-group v-model:value="format" :options="formats" option-type="button" />
        </a-form-item>
        <a-form-item label="结果">
          <a-textarea :value="ulids" readonly :auto-size="{ minRows: 10, maxRows: 10 }" />
        </a-form-item>
        <a-form-item label=" " :colon="false">
          <a-space>
            <a-button @click="refreshUlids">刷新</a-button>
            <a-button @click="copyText(ulids)">复制</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
